﻿@using HCMS.Dictionary
@{
    Layout = "~/Views/Shared/_Layout_Pear_Layui.cshtml";
}

@section Styles {
    <style>
        .btn-more-condition { cursor: pointer; }
            .btn-more-condition .icon { display: inline-block; width: 0; height: 0; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; vertical-align: middle; }
                .btn-more-condition .icon.up { animation: more-condition-arrow-up .5s; animation-fill-mode: both; }
                .btn-more-condition .icon.down { animation: more-condition-arrow-down .5s; animation-fill-mode: both; }

        @@keyframes more-condition-arrow-up {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(180deg); }
        }
        @@keyframes more-condition-arrow-down {
            0% { transform: rotate(180deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
}

<div class="layui-card">
    <div class="layui-card-body layui-current-form">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline" style="min-width:80px;">
                    <div class="layui-input-inline" style="width:80px;">
                        <select id="status">
                            <option value="9999" selected>状态</option>
                            @foreach (var item in new DictCommon().StatusItems())
                            {
                                <option value="@item.Value">@item.Text</option>
                            }
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline layui-form-group">
                        <select id="searchName" name="searchName">
                            <option value="title">敏感词</option>
                        </select>
                        <input type="text" id="searchKey" placeholder="" class="layui-input layui-form-group-input" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="btn-query" style="margin-right:4px;">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" lay-filter="btn-reset">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>

                    <span class="layui-form-label btn-more-condition js-btn-more-condition">
                        <span class="tit layui-unselect">更多搜索</span>
                        <i class="icon "></i>
                    </span>
                </div>
            </div>

            <!-- 更多搜索 -->
            <div class="layui-form-item layui-hide more-condition-box">

                <div class="layui-form-item layui-inline" style="min-width:80px;">
                    <div class="layui-input-inline" style="width:80px;">
                        <select id="classId">
                            <option value="0" selected>分类</option>
                            @foreach (var item in new DictCommon().SensitiveWordsClassItems())
                            {
                                <option value="@item.Value">@item.Text</option>
                            }
                        </select>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>

<script type="text/html" id="toolbar">
    <vc:menu-button action-names="@(new string[]{"add"})"></vc:menu-button>
</script>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="tableList" lay-filter="tableList"></table>
    </div>
</div>

<script type="text/html" id="actionBox">
    <vc:menu-a action-names="@(new string[]{"edit"})"></vc:menu-a>
</script>

<partial name="~/views/shared/partial/_list_statustemp.cshtml" />

@section Scripts {
    <script>
        layui.use(['table', 'form', 'jquery', 'util'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let util = layui.util;

            loadList();
            search();
            toolbar();
            tableActionTool();
            moreCondition();

            // 列表
            function loadList() {
                table.render({
                    elem: '#tableList',
                    url: '/sensitivewords/list/',
                    method: 'post',
                    where: getQueryParams(),
                    height: 'full',
                    page: true,
                    cols: [[
                        { field: 'id', title: 'ID', width: 80 },
                        { field: 'title', title: '敏感词', width: 130 },
                        { field: 'className', title: '分类', width: 80 },
                        { field: 'status', title: '状态', align: 'center', width: 90, templet: '#status_Temp' },
                        { title: '操作', toolbar: '#actionBox', width: 200, style: 'height: 40px;' },
                        { field: 'updateTime', title: '更新 时间', align: 'center', width: 160, templet: function (d) { return util.toDateString(d.updateTime); } },
                        { field: 'updateUser', title: '更新 人', align: 'center', width: 100 },
                        { field: 'createTime', title: '创建 时间', align: 'center', width: 160, templet: function (d) { return util.toDateString(d.createTime); } },
                        { field: 'createUser', title: '创建 人', align: 'center', width: 100 },
                    ]],
                    skin: 'line',
                    toolbar: '#toolbar',
                    defaultToolbar: [{
                        title: '刷新',
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    }, 'filter']
                });
            }

            // 搜索
            function search() {
                form.on('submit(btn-query)', function (data) {
                    table.reload('tableList', {
                        where: getQueryParams(),
                        page: {
                            curr: 1
                        }
                    });
                    return false;   // 阻止默认 form 跳转
                });
            }

            // 搜索条件
            function getQueryParams() {
                return {
                    status: $('#status').val(),
                    searchName: $('#searchName').val(),
                    searchKey: $('#searchKey').val(),
                    classId: $('#classId').val()
                };
            }

            // 工具栏
            function toolbar() {
                table.on('toolbar(tableList)', function (obj) {
                    switch (obj.event) {
                        case 'add': add(); break;
                    }
                });

                function add() {
                    layer.open({
                        type: 2,
                        title: '添加 敏感词',
                        area: ['85%', '85%'],
                        content: '/sensitivewords/add/'
                    });
                }
            }

            // 表格项 操作按钮
            function tableActionTool() {
                table.on('tool(tableList)', function (obj) {
                    switch (obj.event) {
                        case 'edit': edit(obj); break;
                    }
                });

                // 编辑
                function edit(obj) {
                    layer.open({
                        type: 2,
                        title: '修改 ID：' + obj.data['id'],
                        area: ['85%', '85%'],
                        content: '/sensitivewords/edit/?id=' + obj.data['id']
                    });
                }
            }

            // 更多搜索条件
            function moreCondition(){
                var $moreConditionBox=$('.more-condition-box');
                var $btnMore = $('.js-btn-more-condition');
                var $btnIcon = $btnMore.find('.icon');
                var $btnText = $btnMore.find('.tit');

                $btnMore.click(function(){
                    fn();
                });

                function fn(){
                    if($moreConditionBox.hasClass('layui-hide')){
                        $moreConditionBox.removeClass('layui-hide');
                        $btnText.text('收起更多');
                        $btnIcon.addClass('up').removeClass('down');
                    } else{
                        $moreConditionBox.addClass('layui-hide');
                        $btnText.text('更多搜索');
                        $btnIcon.removeClass('up').addClass('down');
                    }
                }
            }
        });
    </script>
}